<template>
	<view class="order-item bg-white radius-16 padding-sm margin-bottom-sm" @tap.stop="navToOrderDetail(item, index)">
		<!-- 订单头部-订单编号&订单状态-开始 -->
		<view class="flex align-center justify-between text-666">
			<view class="text-666 fu-fs28">
				<text>{{ i18n['订单编号'] }}: {{ item.order_sn }}</text>
			</view>
			<view>

				<text class="text-theme" v-if="selectIndex==0">{{ item.status_str }}</text>
				<!-- <text class="text-theme" v-if="selectIndex==0&&item.order_type!=5">{{ item.status | filterStatus }}</text>
				<text class="text-theme" v-if="selectIndex==0&&item.order_type==5">{{ item.status | filterGroupStatus }}</text> -->
				<text class="text-theme" v-if="selectIndex==1">{{ item.is_full | filterStatus1 }}</text>
				<text class="text-theme" v-if="selectIndex==2">{{ item.status | filterStatus2 }}</text>
			</view>
		</view>
		<!-- 订单头部-订单编号&订单状态-结束 -->
		<!-- 订单商品开始 -->
		<view class="padding-tb solid-bottom">
			<block v-for="(goodsItem, goodsIndex) in item.goods" :key="goodsIndex" v-if="selectIndex!=2">
				<view class="flex align-stretch padding-bottom-sm">
					<view class=" relative width-200 height-200 margin-right-sm">
						<fu-image :src="goodsItem.goods_thumb" radius="8" mode="aspectFill"></fu-image>
						<view class="box-kong padding-lr-16 padding-tb-4 text-white text-sm" v-if="goodsItem.port_name||goodsItem.price_port_name">
							{{ selectIndex!=2?goodsItem.port_name:goodsItem.price_port_name}}
						</view>
					</view>
					<view class="flex-sub flex flex-direction justify-between" style="min-width: 1px;">
						<view>
							<view class="text-cut-2 text-333 text-bold fu-fs28">{{ goodsItem.goods_name }}</view>
						</view>
						<view class="flex justify-between align-center">
							<text class="text-theme text-bold">
								<text class="text-price fu-fs20"></text>
								<text class="fu-fs32">{{ goodsItem.shop_price | filterPriceInt}}.</text>
								<text class="fu-fs22">{{ goodsItem.shop_price | filterPriceFloat}}</text>
							</text>
							<text class="fu-fs24 text-999">x {{ goodsItem.num }}</text>
						</view>
					</view>
				</view>
			</block>
			<block v-if="selectIndex==2&&item.goods">
				<view class="flex align-stretch padding-bottom-sm" v-if="item.goods">
					<view class=" relative width-200 height-200 margin-right-sm">
						<fu-image :src="item.goods.goods_thumb" radius="8" mode="aspectFill"></fu-image>
						<view class="box-kong padding-lr-16 padding-tb-4 text-white text-sm" v-if="item.goods.price_port_name">
							{{ item.goods.price_port_name}}
						</view>
					</view>
					<view class="flex-sub flex flex-direction justify-between" style="min-width: 1px;">
						<view>
							<view class="text-cut-2 text-333 text-bold fu-fs28">{{ item.goods.goods_name }}</view>
						</view>
						<view class="flex justify-between align-center">
							<text class="text-theme text-bold">
								<text class="text-price fu-fs20"></text>
								<text class="fu-fs32">{{ item.goods.shop_price | filterPriceInt}}.</text>
								<text class="fu-fs22">{{ item.goods.shop_price | filterPriceFloat}}</text>
							</text>
							<text class="fu-fs24 text-999">x {{ item.goods.num }}</text>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 订单商品结束 -->
		<!-- 操作按钮开始 -->
		<view class="padding-top">
			<view class="flex align-center   padding-bottom" v-if="selectIndex!=2"
				:class='item.order_type==5?"justify-between":"justify-end"'>
				<!-- <text class="fu-fs24 text-666">{{i18n['共']}}</text>
			  <text class="fu-fs24 text-666">{{num}}</text>
			  <text class="fu-fs24 text-666">{{i18n['件商品']}}</text> -->
				<view class="line-theme text-theme padding-lr padding-tb-6 radius-100 text-sm"
					v-if="item.order_type==5">
					拼团
				</view>
				<view class="flex align-center">
					<view class="flex-shrink">
						<text class="fu-fs24 margin-lr-xs text-666" v-if="item.real_money>0">{{i18n['实付款']}}</text>
						<text class="fu-fs24 margin-lr-xs text-666" v-else>{{i18n['应付款']}}</text>
					</view>
					<text class="text-bold text-333">
						<text class="text-price fu-fs20"></text>
						<text class="fu-fs32">{{ item.payable_money | filterPriceInt}}.</text>
						<text class="fu-fs22">{{ item.payable_money | filterPriceFloat}}</text>
					</text>
				</view>

			</view>
			<view class="flex align-center justify-end ">
				<view class="flex algin-center" v-if="selectIndex!=2">
					<view
						class="round width-170 height-60 fu-fs24 text-333 margin-left-sm bg-f8 line-height-60 text-center"
						v-if="isContentShow([0], item.status)" @tap.stop="showCancelReason">
						{{ i18n['取消订单'] }}
					</view>
					<view
						class="round width-170 height-60 fu-fs24 text-333 margin-left-sm bg-f8 line-height-60 text-center"
						v-if="isContentShow([1], item.status)&&selectIndex==0&&item.order_type!=5"
						@tap.stop="confirmOrder">
						确认接单
					</view>
					<!-- 备货中 -->
					<view
						class="round width-170 height-60 fu-fs24 text-333 margin-left-sm bg-f8 line-height-60 text-center"
						v-if="isContentShow([2,7,8], item.status)" @tap.stop="showOrderPop">
						打印订单码
					</view>

					<view
						class="round width-170 height-60 fu-fs24 text-333 margin-left-sm bg-f8 line-height-60 text-center"
						v-if="(selectIndex==0&&isContentShow([-2, -1,10,60], item.status))||(selectIndex==1&&item.is_full==2)"
						@tap.stop="delOrder">
						{{ i18n['删除订单'] }}
					</view>
					<!-- 已完成 -->
					<view
						class="round width-170 height-60 fu-fs24 text-333 margin-left-sm bg-f8 line-height-60 text-center"
						v-if="isContentShow([10], item.status) && item.send_type != 1" @tap.stop="lookEval">
						查看评价
					</view>
				</view>
				<view class="round width-170 height-60 fu-fs24 text-333 margin-left-sm bg-f8 line-height-60 text-center"
					v-if="(selectIndex==0&&isContentShow([3,4,5,7,9,50], item.status))||(selectIndex==1&&isContentShow([0,1,2], item.is_full))||(selectIndex==2&&isContentShow([-1,-2,1,4,5], item.status))"
					@tap.stop="navToOrderDetail(item, index)">
					查看详情
				</view>
				<!-- 售后订单  status 0：申请中  1：待取货  2、3：待收货  4：已完成  -1：售后取消   -2：已拒绝 -->
				<view class="flex algin-center" v-if="selectIndex==2">
					<view
						class="round width-170 height-60 fu-fs24 text-333 margin-left-sm bg-f8 line-height-60 text-center"
						v-if="isContentShow([2,3], item.status)" @tap.stop="receiveOrder(item, index)">
						确认收货
					</view>
					<view
						class="round width-170 height-60 fu-fs24 text-333 margin-left-sm bg-f8 line-height-60 text-center"
						v-if="isContentShow([0], item.status)" @tap.stop="refunceApply(item, index)">
						拒绝申请
					</view>
					<view
						class="round width-170 height-60 fu-fs24 text-white margin-left-sm bg-theme1 line-height-60 text-center"
						v-if="isContentShow([0], item.status)" @tap.stop="agreeApply(item, index)">
						同意申请
					</view>
				</view>
			</view>
		</view>
		<!-- 操作按钮结束 -->
		<!-- 操作售后弹框 -->
		<view class="back-success-wrap" v-if="setRefundPop">
			<view class="mask" @click="setRefundPop = false">
			</view>
			<view class="back-content flex flex-direction justify-between align-center">
				<view class="back-content-info bg-white flex flex-direction justify-between align-center padding-top-50"
					style="height: 280rpx;">
					<view class="text-bold text-333 ">提示</view>
					<view class="text-bold text-333 ">确定同意售后申请吗？</view>
					<view class="flex align-center justify-around solid-top w100 height-100">
						<view class=" text-df text-999 text-center   w49 solid-right height-100 line-height-100"
							@tap.stop='refundConfirm(2)'> 退货退款</view>
						<view class="text-theme text-df text-333 text-center   w49 height-100 line-height-100"
							@tap.stop='refundConfirm(1)'> 仅退款</view>
					</view>
				</view>
				<view class="cuIcon-roundclose margin-top text-white text-xxl  text-62" @click="setRefundPop = false">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default () {
					return {};
				}
			},
			// 订单类型
			selectIndex: {
				type: [Number, String],
				default: 0
			},
			index: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				imgWechatUrl: this.imgWechatUrl,
				setRefundPop: false, //售后弹框
			}
		},
		computed: {
			num() {
				let num = 0;
				if (this.item.goods && this.item.goods.length > 0) {
					this.item.goods.forEach(item => {
						num += item.num;
					})
				}
				return num;
			}
		},
		methods: {
			/**
			 * @description 取消订单
			 * @param {String} item = 订单列表项
			 * @param {Number} index = 当前订单在列表中的索引
			 * */
			showCancelReason() {
				this.$emit('showCancelReason', {
					item: this.item,
					index: this.index
				});
			},
			showOrderPop() {
				this.$emit('showOrderPop', {
					item: this.item
				})
			},
			lookEval() {
				this.$urouter.navigateTo({
					url: '/pages/goods/goodsdetail/goods-comment/index',
					params: {
						order_sn: this.item.order_sn,
						pageType: 'order'
					}
				});
			},
			// 接单
			confirmOrder() {
				this.$util.showModal({
					title: '提示',
					content: '确定要接单吗',
					success: res => {
						if (res.confirm) {
							this.$api.post('/v1/64015a7585340', {
								aid: this.item.aid
							}).then(result => {
								if (result.data.code == 1) {
									this.$message.info('接单成功');
									uni.$emit('onPageUpdata')
								} else {
									this.$message.info(data.msg);
								}
							}).catch(err => {
								this.$message.info('服务器错误，请稍后重试');
							});
						}
					}
				});
			},
			/**
			 * @description 去支付
			 * @param {string} sn = 订单号
			 * @param {Number} type = 订单类型
			 * */
			toPay() {
				this.$urouter.navigateTo({
					url: '/pages/order/order-process/pay-order/index',
					params: {
						order_sn: this.item.order_sn,
						order_type: this.item.order_type,
						itemIndex: this.index
					}
				});
			},
			/**
			 * @description 删除订单
			 * @param {Object} item = 当前订单项对象
			 * @param {Number} index = 当前订单在列表中的索引
			 */
			delOrder() {
				this.$util.showModal({
					title: this.i18n['确认删除此订单?'],
					content: this.i18n['删除后不可恢复'],
					success: res => {
						if (res.confirm) {
							this.$api.post('/v1/63e20688b1e18', {
								order_aid: this.item.aid
							}).then(result => {
								if (result.data.code == 1) {
									this.$message.info(this.i18n['删除成功']);
									uni.$emit('onPageUpdata', {
										type: 4, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单
										index: this.index,
									})
								} else {
									this.$message.info(data.msg);
								}
							}).catch(err => {
								this.$message.info('服务器错误，请稍后重试');
							});
						}
					}
				});
			},
			// 拒绝申请
			refunceApply(item) {
				this.$emit('refunceApply', item)
			},
			refundConfirm(e) {
				let that = this
				that.$api.post('/v1/63e4b3ba26de0', {
					rf_id: this.item.id,
					refund_type: e // 1退款 2退货退款
				}).then(result => {
					if (result.data.code == 1) {
						this.setRefundPop = false
						uni.$emit('updateAfterOrder')
					} else {
						that.$message.info(result.data.msg);
					}
				}).catch(err => {
					console.log(err);
				});
			},
			// 同意售后
			agreeApply() {
				this.setRefundPop = true
			},
			/**
			 * @description 确认收货
			 * @param {Object} item = 当前订单项对象
			 * @param {Number} index = 当前订单在列表中的索引
			 * */
			receiveOrder() {
				this.$util.showModal({
					title: this.i18n['提示'],
					content: this.i18n['您是否确认收到货物?'],
					success: res => {
						if (res.confirm) {
							this.$api.post('/v1/63fec5e13eb20', {
								refund_money: this.item.goods_money,
								id: this.item.id
							}).then(res => {
								this.$message.info(res.data.msg);
								if (res.data.code == 1) {
									uni.$emit('onPageUpdata')
								} else {

								}
							}).catch(err => {
								this.$message.info('服务器错误，请稍后重试');
							});
						}
					}
				});
			},

			seelogs() {
				this.$urouter.navigateTo({
					url: '/pages/order/orderdetail/express-delivery/index',
					params: {
						order_sn: this.item.order_sn
					}
				});
			},
			/**
			 * @description 查看订单详情
			 * @param {String} item = 订单列表项
			 * @param {Number} index = 当前订单在列表中的索引
			 * */
			navToOrderDetail(item, index) {
				if (this.selectIndex == 2) {
					this.$urouter.navigateTo({
						url: '/pages/order/afterorder/afterorder-detail/index',
						params: {
							order_sn: item.order_sn,
							order_type: item.order_type,
							itemIndex: index,
							id: item.id
						}
					});
				} else {
					this.$urouter.navigateTo({
						url: '/pages/order/orderdetail/order-detail/index',
						params: {
							order_sn: item.order_sn,
							order_type: item.order_type,
							itemIndex: index,
							selectIndex: this.selectIndex,
							is_full: item.is_full
						}
					});
				}

			},
			/**
			 * @description 去评价
			 * @param {string} item = 订单列表项
			 * */
			evaluateOrder() {
				uni.setStorageSync('order_goods_list', JSON.stringify(this.item.goods));
				this.$urouter.navigateTo({
					url: '/pages/order/evaluation/order-evaluation/index',
					params: {
						order_sn: this.item.order_sn,
						order_type: this.item.order_type,
						itemIndex: this.index
					}
				});
			},
			/**
			 * @description 判断内容是否显示
			 * @param {String} arr = 要判端数组
			 * @param {String | Number} val = 要判的值
			 */
			isContentShow(arr, val) {
				return arr.includes(val * 1);
			},
		},
		filters: {
			// 订单状态过滤器  status每个值代表的状态
			//   0：待支付  1：待接单  2：备货中  3：待送货  4、5、6：配送中   7、8：待收货  9：待评价  10：已完成 60 售后已完成  -1：已关闭  -2 已关闭
			filterStatus(val, order_type) {
				switch (val) {
					case 0:
						return '待支付';
					case 1:
						return '待接单';
					case 2:
						return '备货中';
					case 3:
						return '待送货';
					case 4:
						return '配送中';
					case 5:
						return '配送中';
					case 6:
						return '配送中';
					case 7:
						return '待收货';
					case 8:
						return '待收货';
					case 9:
						return '待评价';
					case 10:
						return '已完成';
					case 50:
						return '售后中';
					case 60:
						return '售后已完成';
					case -1:
						return '已关闭';
					case -2:
						return '已关闭';
					default:
						return '';
				}
			},
			// 普通订单里面的拼团订单
			filterGroupStatus(val) {
				switch (Number(val)) {
					case 0:
						return '待支付';
					case 1:
						return '拼团中';
					case 2:
						return '拼团失败';
					case -1:
						return global.i18n['交易关闭'];
					case -2:
						return global.i18n['已取消'];
					default:
						return '';
				}
			},
			// 拼团订单
			filterStatus1(val) { // 0：进行中   1：已成团  2：拼团失败
				switch (Number(val)) {
					case 0:
						return '拼团中';
					case 1:
						return '已成团';
					case 2:
						return '拼团失败';
					case -1:
						return global.i18n['交易关闭'];
					case -2:
						return global.i18n['已取消'];
					default:
						return '';
				}
			},
			// 售后订单 status 0：申请中  1：待取货  2、3：待收货  4：已完成  -1：售后取消   -2：已拒绝
			filterStatus2(val) {
				switch (val) {
					case 0:
						return '申请中';
					case 1:
						return '待取货';
					case 2:
						return '待收货';
					case 3:
						return '待收货';
					case 4:
						return '已完成';
					case 5:
						return '已完成';
					case -1:
						return '已取消';
					case -2:
						return '已拒绝';
					default:
						return '';
				}
			},

			filterPriceInt(val) {
				if (!val) return "";
				return val.toString().split('.')[0];
			},
			filterPriceFloat(val) {
				if (!val) return "";
				return val.toString().split('.')[1];
			},
		}
	}
</script>

<style scoped lang="scss">
	.order-item {
		.btn {
			color: #333;
			background-color: #f6f6f6;

			&:last-child {
				color: #fff;
				background: $bgtheme;
			}
		}
	}

	.box-kong {
		position: absolute;
		border-radius: 16rpx 0 16rpx 0;
		left: 0;
		top: 0;
		z-index: 9;
		background: rgba(0, 0, 0, 0.6);
	}

	.back-success-wrap {
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 99;
			background: rgba(0, 0, 0, 0.3);
		}

		.back-content {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 100;
			width: 540rpx;

			// height: 424rpx;
			.back-content-info {
				border-radius: 25rpx;
				width: 540rpx;
				height: 526rpx;


				.text {
					font-size: 150rpx;
				}
			}
		}
	}
</style>